<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.v3.min.js"></script>
    <script>
        const width = 960
        height =600;

        const svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height)
        // .attr("stroke-width", 2);

        const nodes = d3.range(20)
        .map((d,i)=>{
            return {
                x:Math.random()*(width - d * 2)+d,
                y:Math.random()*(height - d * 2)+d,
                d:d
            }
        })

        // console.log(nodes);

        const color = d3.scale.category10()

        svg.append("g")
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("cx",d=>{
            return d.x
        })
        .attr("cy",d=>{
            return d.y
            })
        .attr("r",d=>{
            return d.d*5
        })
        .attr("fill",(d,i)=>{
            return color(i%10)
        })
        // .attr("stroke","#000")

        
    </script>
</body>
</html>